//调课申请


import React, { useEffect, useState,useRef } from 'react';
import { Layout, Menu, Table, Input, Button, Space, Spin,Popconfirm,Pagination } from 'antd';
import { SearchOutlined,CheckOutlined ,CloseOutlined} from '@ant-design/icons';
import { getAppliAPI } from '@/api/admin';
import './index.scss'
import { useDispatch, useSelector } from 'react-redux';
import { updateAppliAPI } from '@/api/admin';
import { useReTip } from '@/hooks/useReTip';
// import 'antd/dist/antd.css'; // 引入antd样式

const { Header, Content, Footer } = Layout;


const Application = () => {
  const dispatch = useDispatch()
  const [loading, setLoading] = useState(false);
  const {handleRemind} = useReTip()

  //存储申请列表
  const [appliList,setAppliList] = useState(
   [
    {
      studentId:'',
      name: '',
      phone:'',
      subject: '',
      reason: '',
      date: '',
      hopeDate:'',
      judgement:[]
    }
   ] 
  )
  useEffect(() => {
    // 创建一个异步函数
    const fetchData = async () => {
      try {
        // 等待getAppliAPI的响应
        const res = await getAppliAPI();
        console.log("申请：", res);
  
        // 解析后端返回的数据，并去除"data"层包裹
        const parsedData = res.data.filter(item => item.appState === 0);
  
        // 将后端数据转换为与初始状态相同结构（移除React组件）
        const formattedData = parsedData.map(item => ({
          studentId: item.studentId,
          name: item.name,
          phone: item.phone, 
          subject: item.subject,
          reason: item.reason,
          date: item.date,
          hopeDate: item.hopeDate,
          judgement: [
            <button 
              className='button-judgement' 
              onClick={() => handConfirm(item.studentId)}
            >
              <CheckOutlined />
            </button>,
            ' ',
            <Popconfirm 
              title="是否确认不通过？" 
              cancelText="否" 
              okText="是" 
              onConfirm={(e) => onConfirmApp(e, item.studentId)}
            >
              <CloseOutlined /> 
            </Popconfirm>
          ]
        }));
  
        // 更新状态
        setAppliList(formattedData);
      } catch (error) {
        // 处理错误
        console.error("获取数据时出错:", error);
      }
    };
  
    // 立即调用异步函数
    fetchData();
  }, []); // 空依赖数组意味着这个effect只会在组件挂载后执行一次

  //存储审核状态 1:不过审，2：过审
  //监听不过审请求
  const onConfirmApp=async(e,studentId) =>{
    const res= await updateAppliAPI(studentId,1)
    handleRemind(res.status,'审核')
  }
//监听过审请求
const handConfirm = async(e)=>{
   const res= await updateAppliAPI(e,2)
   handleRemind(res.status,'审核')
}
  return (
      <Layout className="business-evaluation-manager">
      <Header>
        <div className="header-content">
          <Menu theme="dark" mode="horizontal">
            <Menu.Item key="1">审批调课申请</Menu.Item>
          </Menu>
        </div>
      </Header>
      <Content>
        <Spin spinning={loading}>
          <Table
            dataSource={appliList}
            rowKey="studentId"
            pagination={{ pageSize: 10 }}
            columns={[
              { title: '学员学号', dataIndex: 'studentId' },
              { title: '学员姓名', dataIndex: 'name' },
              { title: '联系电话', dataIndex: 'phone' },
              { title: '调课科目', dataIndex: 'subject' },
              { title: '调课原因', dataIndex: 'reason' },
              { title: '原上课时间', dataIndex: 'date' },
              { title: '期望上课时间', dataIndex: 'hopeDate' },
              { title: '是否同意', dataIndex: 'judgement' },
              // 其他列...
            ]}
          />
        </Spin>
      </Content>
      <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer>
    </Layout>
     
    
  );
};

export default Application;